<template>
  <div>
    <el-row :gutter="20">
      <el-col :md="6" v-for="item in panel_data" :key="item.title">
        <com-panel :send_panel="item"></com-panel>
      </el-col>
    </el-row>

    <el-row class="echarts">
      <el-col>
        <com-echarts
          :sendStyle="{ w: '100%', h: '500px', bgc: 'white' }"
          :sendObj="obj"
        >
        </com-echarts>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ComEcharts from "../../components/comecharts";
import ComPanel from "../../components/panel";
import { api_home } from "../../api/home.js";
import * as echarts from "echarts";

export default {
  components: {
    ComEcharts,
    ComPanel,
  },
  data() {
    return {
      panel_data: [
        {
          title: "总订单",
          icon: "icon-dingdan1",
          count: 9000,
          color: "#0092D7",
        },
        {
          title: "总销售额",
          icon: "icon-dangrixiaoshoue",
          count: 9000,
          color: "#EA0063",
        },
        {
          title: "今日订单",
          icon: "icon-dingdan",
          count: 9000,
          color: "#0093D8",
        },
        {
          title: "今日销售额",
          icon: "icon-a-icon-xiaoshoue-fuben",
          count: 9000,
          color: "#00FE48",
        },
      ],

      obj: {
        title: "数据统计",
        legend: ["订单", "金额"],
        xAxis: {},
        series: [],
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    async query() {
      let rst = await api_home();
      let {
        xData,
        orderData,
        amountData,
        totalOrder,
        totalAmount,
        todayOrder,
        totayAmount,
      } = rst;
      this.obj.xAxis = xData;
      this.obj.series = [amountData, orderData].map((item, index) => {
        return {
          // name: ['金额','订单详情'][index],
          // type: "line",
          // stack: "Total",
          // data: item

          name: ["金额", "订单详情"][index],
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(128, 255, 165)",
              },
              {
                offset: 1,
                color: "rgb(1, 191, 236)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: item,
        };

      });
      
      [totalOrder, totalAmount, todayOrder, totayAmount].forEach(
        (item, index) => [(this.panel_data[index].count = item)]
      );

      console.log(rst);
    },
  },
};
</script>

<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
</style>